<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view"/>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      let transitionName = ''
      let datas = { transitionName }
      return datas
    },
    watch: {
      '$route' (to, from) {
        this.transitionName = 'mu-fade-transition'
      }
    },
    components: {}
  }
</script>

<style>
  body {
    margin: 0;
    background-color: #FFF;
  }

  .child-view {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
    background-color: #ffffff;
  }

  .child-view > div {
    position: relative;
  }
</style>
